<!DOCTYPE html>
<html>

<head>
    <meta charset="UTF-8">
    <title>周记实考核结果</title>
    <meta name="renderer" content="webkit">
    <meta http-equiv="X-UA-Compatible" content="IE=edge,chrome=1">
    <meta name="viewport"
          content="width=device-width,user-scalable=yes, minimum-scale=0.4, initial-scale=0.8,target-densitydpi=low-dpi"/>
    <link rel="shortcut icon" href="favicon.ico" type="image/x-icon"/>
    <link rel="stylesheet" href="static/css/font.css">
    <link rel="stylesheet" href="static/css/xadmin.css">
    <script type="text/javascript" src="static/js/jquery-3.3.1.js"></script>
    <script type="text/javascript" src="static/lib/layui/layui.js"></script>
    <script type="text/javascript" src="static/js/xadmin.js"></script>
    <style type="text/css">
        .laytable-cell-1-eAccount {
            width: 200px;
        }


    </style>
    <style type="text/css">
        .layui-table-cell {
            height: auto;
            line-height: 20px;
            padding: 0 15px;
            position: relative;
            overflow: hidden;
            text-overflow: ellipsis;
            box-sizing: border-box;
            white-space: nowrap;
        / / nowrap = 不换行 normal = 正常
        }
    </style>
</head>

<body class="layui-anim layui-anim-up">

<div class="x-nav">
		<span class="layui-breadcrumb"> <a>首页</a> <a>周记实考核统计</a> <a> <cite>周记实考核结果</cite></a>
            <!-- 在文本中添加提示信息 -->
		</span> <a class="layui-btn layui-btn-small"
                   style="line-height: 1.6em; margin-top: 3px; float: right"
                   href="javascript:location.replace(location.href);" title="刷新"> <i
        class="layui-icon" style="line-height: 30px">ဂ</i></a>
</div>

<div class="x-body" id="container">
    <div class="layui-row">
        <div class="demoTable layui-col-md10 layui-form">
            选择时间：
            <div class="layui-input-inline">
                <input type="text" class="layui-input" id="timePicker">
            </div>
            <button id="searchBtn" type="button" class="layui-btn" style="margin-left: 1rem;">查询</button>
        </div>
    </div>
    <!--demoTable-->
</div>

<div style="text-align: center">
    <table class="layui-table">
        <thead>
        <tr>
            <th style="width: 180px; text-align: center;">考核时间</th>
            <th style="width: 180px; text-align: center;">分数</th>
            <th style="text-align: center;">评语</th>
        </tr>
        </thead>
        <tbody>
        <tr>
            <td id="tableTime"></td>
            <td id="tableScore"></td>
            <td id="tableWords"></td>
        </tr>
        </tbody>
    </table>
</div>

</div>


<script>

    let selectTime = new Date();

    window.onload = function () {
        let month = selectTime.getMonth() + 1;
        if (month < 10) {
            month = '0'+month;
        }
        $("#tableTime").html(selectTime.getFullYear() + '-' + month);
        $.get("empWeekInfo/getComments.do", {year: selectTime.year, month: selectTime.month}, function (res) {
            if (res !== '') {
                $("#tableScore").html(res.xCheckScore);
                $("#tableWords").html(res.xCheckResult);
            } else {
                layer.msg('当前月份无考核结果！');
                $("#tableScore").html('');
                $("#tableWords").html('');
            }
        })
    }

    $('#searchBtn').click(function () {
        let month = selectTime.month;
        if (month < 10) {
            month = '0'+month;
        }
        $("#tableTime").html(selectTime.year + '-' + month);
        $.get("empWeekInfo/getComments.do", {year: selectTime.year, month: selectTime.month}, function (res) {
            if (res !== '') {
                $("#tableScore").html(res.xCheckScore);
                $("#tableWords").html(res.xCheckResult);
            } else {
                layer.msg('当前月份无考核结果！');
                $("#tableScore").html('');
                $("#tableWords").html('');
            }
        })
    })

    // 刷新(主要用于批量删除，不能直接在里面刷新，那样会使操作失败，要跳出来执行)
    function myReload() {
        location.replace(location.href);
    }

    /* 监听打印选中行按钮 */
    $('#printSelect').click(function () {
        layui.use(['table', 'layer'], function () {
            var table = layui.table,
                layer = layui.layer;

            var checkStatus = table.checkStatus('idTest')
            // 判断是否选中数据
            if (checkStatus.data.length === 0) {
                layer.msg('请选择周计划数据', {
                    icon: 2
                })
            } else if (checkStatus.data.length >= 2) {
                layer.msg('一次只能打印一条', {
                    icon: 2
                })
            } else {
                printSelect(checkStatus.data)
            }
        })
    })

    /*
     * [自定义打印选中行数据]
     * @param  {[type]}  allData [传入选中行]
     */
    function printSelect(allData) {

        console.log("allData=" + JSON.stringify(allData));
        //用于包含内容
        var v = document.createElement("div");
        //页面头部，导入css  ，media="print"表示打印时使用该样式
        var f = ["<head>", "<style>", "div{font-size:16px;}", ".main{width:100%;height:100%}",
            ".main div{width:300px;margin-right: 50px;display:inline-block;}", "</style>", "</head>"
        ].join("");
        var contentHtml = "";
        for (let i = 0; i < allData.length; i++) {
            var data = allData[i]

            var template =

                "<div style='width:700px ;height: 700px;'>" +
                "<table width='100%' style='text-align: center'>" +
                "<tr>" +
                "<td colspan='7' style='font-size: 30px'><strong>公务员平时考核周记实表</strong><br>" +
                "</td>" +
                "</tr>" +

                "<tr>" +
                "<td colspan='7' style='font-size: 25px'>(第" + data.wWeekMonth + "周)<br>" +
                "</td>" +
                "</tr>" +

                "<tr>" +
                "<td colspan='7' style='font-size: 25px'>" + data.wWeekFirLa + "" +
                "</td>" +
                "</tr>" +

                "</table>" +
                "<table width='100%' style='text-align: left;' border='1'>" +

                "<tr style='text-align: center;'>" +
                "<td colspan='1' width='15%' height='50px;' style='font-size: 23px'><strong>姓名</strong></th>" +
                "<td colspan='2' width='25%' height='50px;' style='font-size: 23px'>" + data.wName + "</td>" +
                "<td colspan='2' width='15%' height='50px;' style='font-size: 23px'><strong>科室</strong></th>" +
                "<td colspan='2' width='25%' height='50px;' style='font-size: 23px'>" + data.wDname + "</td>" +
                "</tr>" +
                "<tr style='text-align: center;'>" +
                "<td colspan='1' width='200px;' height='50px;' style='font-size: 23px'><strong>项目</strong></td>" +
                "<td colspan='6' width='200px;' height='50px;' style='font-size: 23px'><strong>内容</strong></td>" +
                "</tr>" +

                "<tr>" +
                "<td colspan='1' width='300px;'  style='text-align: center;font-size: 20px'>日常工作</td>" +
                "<td colspan='6' >" + data.wWeekInfo + "<br>" +
                "</td>" +
                "</tr>" +
                "<tr>" +
                "<td colspan='1' width='270px;' style='text-align: center;font-size: 20px'>重要工作</td>" +
                "<td colspan='6'>" + data.wZdgzInfo + "</td>" +
                "</tr>" +

                "<tr>" +
                "<td colspan='1' width='270px;' style='text-align: center;font-size: 20px'>创新工作</td>" +
                "<td colspan='6'>" + data.wCxgzInfo + "</td>" +
                "</tr>" +
                "<tr>" +
                "<td colspan='1' width='270px;' style='text-align: center;font-size: 20px'>其他事项</td>" +
                "<td colspan='6'>" + data.wTempOraryInfo + "</td>" +
                "</tr>" +

                /**   员工自己打分是没有领导评分的**/
                "<tr>" +
                "<td colspan='1' width='300px;' height='60px;'  style='text-align: center;font-size: 20px'>本人确认签字</td>" +
                "<td colspan='6' height='88px;' style='text-align: center;'></td>" +
                "</tr>" +

                "<tr></tr>" +
                "</table>" +
                "</div>"

            contentHtml += template;
        }

        //contentHtml为已拼凑好的内容
        $(v).append(contentHtml)
        //新建窗口
        var h = window.open("打印窗口", "_blank");
        //写入拼凑内容
        h.document.write(f + $(v).prop("outerHTML"));
        //调用打印
        h.print();
        //关闭页面
        h.close();
    }

    layui.use(['form', 'util', 'layedit', 'laydate', 'table'], function () {
        var form = layui.form
            , util = layui.util
            , layer = layui.layer
            , layedit = layui.layedit
            , laydate = layui.laydate
            , table = layui.table;

        // 年月选择器
        laydate.render({
            elem: '#timePicker',
            type: 'month',
            done: function (value, date) {
                // value 为日期生成的值
                // date 为日期时间对象
                // console.log(date.year + ' ' + date.month)
                selectTime = date;
                table.reload('idTest', {
                    page: {
                        curr: 1
                    }, where: {
                        year: date.year,
                        month: date.month
                    }
                })
            }
        })
    })

</script>
</body>
</html>
